<template>
  <el-row class="time-picker">
    <el-date-picker
      v-model="time"
      :type="type"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :value-format="type == 'daterange' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
      size="mini"
      :clearable="false"
    >
    </el-date-picker>
    <el-radio-group
      class="time-group"
      v-model="checkTime"
      size="mini"
      @change="changeTime"
    >
      <el-radio-button label="today">今日</el-radio-button>
      <el-radio-button label="yesterday">昨日</el-radio-button>
      <el-radio-button label="week">本周</el-radio-button>
      <el-radio-button label="month">本月</el-radio-button>
      <el-radio-button label="lastMonth">上个月</el-radio-button>
      <el-radio-button label="halfYear">近6个月</el-radio-button>
    </el-radio-group>
  </el-row>
</template>

<script>
import moment from 'moment';
export default {
  props: {
    type: {
      type: String,
      default: 'daterange'
    },
    format: {
      type: Array,
      default: function() {
        return ['YYYY-MM-DD', 'YYYY-MM-DD'];
      }
    }
  },
  data() {
    return {
      time: [],
      checkTime: 'today',
      today: [moment().format(this.format[0]), moment().format(this.format[1])],
      yesterday: [
        moment()
          .subtract(1, 'days')
          .format(this.format[0]),
        moment()
          .subtract(1, 'days')
          .format(this.format[1])
      ],
      week: [
        moment()
          .startOf('isoWeek')
          .day('Monday')
          .format(this.format[0]),
        moment()
          .startOf('isoWeek')
          .day('Monday')
          .day(+7)
          .format(this.format[1])
      ],
      month: [
        moment()
          .startOf('month')
          .format(this.format[0]),
        moment()
          .endOf('month')
          .format(this.format[1])
      ],
      lastMonth: [
        moment()
          .subtract(1, 'months')
          .startOf('month')
          .format(this.format[0]),
        moment()
          .subtract(1, 'months')
          .endOf('month')
          .format(this.format[1])
      ],
      halfYear: [
        moment()
          .subtract(6, 'months')
          .format(this.format[0]),
        moment().format(this.format[1])
      ]
    };
  },
  watch: {
    time: function(val) {
      this.checkTime = '';
      let arr = [
        'today',
        'yesterday',
        'week',
        'month',
        'lastMonth',
        'halfYear'
      ];
      arr.map(item => {
        if (JSON.stringify(this[item]) == JSON.stringify(val)) {
          this.checkTime = item;
        }
      });
      this.$emit('getTime', val);
    }
  },
  created() {
    this.time = this.today;
  },
  methods: {
    changeTime(val) {
      this.time = this[val];
    }
  }
};
</script>

<style lang="scss">
.time-picker .time-group {
  margin-left: 30px;
  .el-radio-button + .el-radio-button {
    margin-left: 15px;
  }
  .el-radio-button .el-radio-button__inner {
    border-radius: 13px;
    border: 1px solid #eaeaea;
    padding: 4px 10px;
    color: #606d86;
    box-shadow: unset;
  }
  .el-radio-button.is-active .el-radio-button__inner {
    color: #2c67f6;
    background: #fff;
    border-color: #2c67f6;
  }
}
</style>
